                        

                        <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>城市下拉列表</title>
  <link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />
  <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

</head>
<body onLoad="mapInit()">
  <div id="iCenter" style="height:700px;"></div>
  <div>
    省：
    <select id='province' style="width:100px"  onchange='search(this)'></select>
    市：
    <select id='city' style="width:100px"  onchange='search(this)'></select>
    区：
    <select id='district' style="width:100px" onchange='search(this)'></select>
    商圈：
    <select id='biz_area' style="width:100px"></select>
  </div>
 <div>下拉列表选择省-市-区划以后，绘制区划边界</div>
</body>
  <script language="javascript">
var mapObj, district, polygons=[], citycode;
var citySelect = document.querySelector('#city');
var districtSelect = document.querySelector('#district');
var areaSelect = document.querySelector('#biz_area');;
function mapInit(){
  mapObj = new AMap.Map('iCenter',{
    layers: [
        new AMap.TileLayer()
    ],
    view: new AMap.View2D({
        center: new AMap.LngLat(116.30946,39.937629),
        zoom: 3
    })
});
  
var provinceList = ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省','黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省','河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市','四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台灣', '香港特别行政区', '澳门特别行政区'];
var provinceSelect = document.querySelector('#province');
var content = '<option>--请选择--</option>';
for(var i =0, l = provinceList.length; i < l; i++){
  content += '<option value="province">'+provinceList[i]+'</option>';
  provinceSelect.innerHTML = content;
}

//行政区划查询
   
mapObj.plugin(["AMap.DistrictSearch"], function() {
    var opts = {
        subdistrict: 1,   //返回下一级行政区
        extensions: 'all',  //返回行政区边界坐标组等具体信息
        level:'city'  //查询行政级别为 市
    };

    //实例化DistrictSearch
    district = new AMap.DistrictSearch(opts); 

    //查询成功时的回调函数，定义如何展示请求返回结果
    AMap.event.addListener(district, 'complete', function(e){
      var dList = e.districtList;
      for(var m = 0,ml = dList.length; m < ml; m++){
        
        var data = e.districtList[m].level;
        var bounds = e.districtList[m].boundaries;

        if(data == "district" && dList[m].citycode === citycode){//只绘制 区, 且 本级别行政区划是上一级区划的下级行政区
          if(bounds) {
            for(var i =0, l = bounds.length; i < l; i++){
              //生成行政区划polygon
              var polygon = new AMap.Polygon({
                map:mapObj,
                strokeWeight:1,
                strokeColor:'#CC66CC',
                fillColor:'#CCF3FF',
                fillOpacity:0.7,
                path:bounds[i]
              });
              polygons.push(polygon);
            }
            mapObj.setFitView();//地图自适应
          }
        }

        var list = e.districtList || [],
            subList =[], level, nextLevel;
        if(list.length >= 1) {
          subList = list[0].districtList;
          level = list[0].level;
        }

        //清空下一级别的下拉列表
        if(level === 'province'){
          
          nextLevel = 'city';
          citySelect.innerHTML = '';
          districtSelect.innerHTML = '';
          areaSelect.innerHTML = '';
        }else if(level === 'city'){

          nextLevel = 'district';
          districtSelect.innerHTML = '';
          areaSelect.innerHTML = '';
        } else if(level === 'district') {
            
            nextLevel = 'biz_area';
            areaSelect.innerHTML = '';
        }

        if(subList){
          var contentSub = '<option>--请选择--</option>';
          for(var i=0,l=subList.length; i<l; i++){
            var name = subList[i].name; 
            var levelSub = subList[i].level;
            var cityCode = subList[i].citycode;
            contentSub += '<option value="'+levelSub+'|'+cityCode+'">'+name+'</option>';
            document.querySelector('#'+levelSub).innerHTML = contentSub;
          }
        }
      }      
    }); 
});

}
function search(obj){
  //清除地图上所有覆盖物
  for(var i = 0, l = polygons.length; i < l; i ++){
    polygons[i].setMap(null);
  }
  
  var option = obj[obj.options.selectedIndex];
  var arrTemp = option.value.split('|');
  var level = arrTemp[0];//行政级别
  citycode = arrTemp[1];// 城市编码
  var keyword = option.text; //关键字

  district.setLevel(level); //行政区级别
  district.search(keyword); //行政区查询
}
</script></html>                        

        